<template>
  <view class="gongwei">
    <bazi-section title="先天财富参考">
      <view class="liuqin-containter" v-if="isVip != 1">
        <view class="liuqin-table">
          <view class="th">
            <view class="th-item">年柱</view>
            <view class="th-item">月柱</view>
            <view class="th-item">日柱</view>
            <view class="th-item">时柱</view>
          </view>
          <view class="tr">
            <view class="tr-item">
              <view class="caiku-item">
                <view class="jx-sizhu" :style="fiveElementInfo(tiangan[0])">{{
                  tiangan[0]
                }}</view>
                <caiku-icon :ganzhi="tiangan[0]" :riyuan="tiangan[2]"></caiku-icon>
              </view>
              <view class="jx-type">年干</view>
            </view>
            <view class="tr-item">
              <view class="caiku-item">
                <view class="jx-sizhu" :style="fiveElementInfo(tiangan[1])">{{
                  tiangan[1]
                }}</view>
                <caiku-icon :ganzhi="tiangan[1]" :riyuan="tiangan[2]"></caiku-icon>
              </view>
              <view class="jx-type">月干</view>
            </view>
            <view class="tr-item">
              <view class="jx-sizhu jx-self" :style="fiveElementInfo(tiangan[2])">{{
                tiangan[2]
              }}</view>
              <view class="jx-type">日干（日元）</view>
            </view>
            <view class="tr-item">
              <view class="caiku-item">
                <view class="jx-sizhu" :style="fiveElementInfo(tiangan[3])">{{
                  tiangan[3]
                }}</view>
                <caiku-icon :ganzhi="tiangan[3]" :riyuan="tiangan[2]"></caiku-icon>
              </view>
              <view class="jx-type">时干</view>
            </view>
          </view>
          <view class="tr">
            <view class="tr-item tr-dizhi">
              <view class="caiku-item">
                <view class="jx-sizhu" :style="fiveElementInfo(dizhi[0])">{{
                  dizhi[0]
                }}</view>
                <caiku-icon :ganzhi="dizhi[0]" :riyuan="tiangan[2]"></caiku-icon>
              </view>
              <view class="jx-type">年支</view>
            </view>
            <view class="tr-item">
              <view class="caiku-item">
                <view class="jx-sizhu" :style="fiveElementInfo(dizhi[1])">{{
                  dizhi[1]
                }}</view>
                <caiku-icon :ganzhi="dizhi[1]" :riyuan="tiangan[2]"></caiku-icon>
              </view>
              <view class="jx-type">月支</view>
            </view>
            <view class="tr-item">
              <view class="caiku-item">
                <view class="jx-sizhu" :style="fiveElementInfo(dizhi[2])">{{
                  dizhi[2]
                }}</view>
                <caiku-icon :ganzhi="dizhi[2]" :riyuan="tiangan[2]"></caiku-icon>
              </view>
              <view class="jx-type">日支</view>
            </view>
            <view class="tr-item tr-dizhi">
              <view class="caiku-item">
                <view class="jx-sizhu" :style="fiveElementInfo(dizhi[3])">{{
                  dizhi[3]
                }}</view>
                <caiku-icon :ganzhi="dizhi[3]" :riyuan="tiangan[2]"></caiku-icon>
              </view>
              <view class="jx-type">时支</view>
            </view>
          </view>
        </view>
        <view class="info">
          <view class="score-box">
            <view class="title">先天财富格局</view>
            <view class="score">{{ baziResult.innateWealth }}分</view>
          </view>
        </view>
        <view class="info">
          <view class="score-box">
            <view class="title">先天财富简评</view>
            <view class="score">{{ baziResult.innateWealthDesc }}分</view>
          </view>
        </view>
      </view>
      <view v-else>
        <no-vip></no-vip>
      </view>
    </bazi-section>
  </view>
</template>
<script>
import { mapGetters } from "vuex";
import baziSection from "./section.vue";
import caikuIcon from "./caiku-icon.vue";
import wuxingColor from "@/utils/wuxing.js";
export default {
  components: {
    baziSection,
    caikuIcon,
  },
  props: {
    result: {
      type: Object,
      default: {},
    },
  },
  computed: {
    ...mapGetters({
      isVip: "user/isVip",
    }),
  },
  data() {
    return {
      baziResult: this.result,
      tiangan: [],
      dizhi: [],
    };
  },
  mounted() {
    this.tiangan = [
      this.baziResult.yearGan,
      this.baziResult.monthGan,
      this.baziResult.dayGan,
      this.baziResult.timeGan,
    ];
    this.dizhi = [
      this.baziResult.yearZhi,
      this.baziResult.monthZhi,
      this.baziResult.dayZhi,
      this.baziResult.timeZhi,
    ];
  },
  methods: {
    // 对应五行信息
    fiveElementInfo(str) {
      let { color } = wuxingColor.getGanzhiWuxingColorInfo(str);
      return `color: ${color}`;
    },
  },
};
</script>

<style lang="scss" scoped>
.gongwei {
  width: 100%;
  box-sizing: border-box;
}

.section {
  width: 100%;
  height: 72rpx;
  color: white;
  background: #c5a680;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 10rpx 46rpx;

  .section-title {
    padding-right: 22rpx;
  }
}

.liuqin-containter {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 32rpx 0;
}

.liuqin-table {
  width: 650rpx;
  margin: auto;

  .th {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;

    .th-item {
      width: 25%;
      white-space: nowrap;
      text-align: center;
      color: #2c2c2c;
      background-color: #e2dbd4;
      border: 2rpx solid #525252;
      margin: 0 -2rpx -2rpx 0;
      padding: 4rpx 0;
    }

    .th-item:first-child {
      border-radius: 4rpx 0 0 0;
      border: 2rpx solid #4b240d;
    }

    .th-item:last-child {
      border-radius: 0 4rpx 0 0;
      border: 2rpx solid #4b240d;
    }
  }

  .tr {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;

    .tr-item {
      width: 25%;
      display: flex;
      flex-direction: column;
      align-items: center;
      border: 2rpx solid #4b240d;
      margin: 0 -2rpx -2rpx 0;
      padding: 10rpx 0;
    }

    .tr-dizhi:first-child {
      border-radius: 0 0 0 10rpx;
      border: 2rpx solid #4b240d;
    }

    .tr-dizhi:last-child {
      border-radius: 0 0 10rpx 0;
      border: 2rpx solid #4b240d;
    }
  }
}

.caiku-item {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.jx-sizhu {
  color: #ffffff;

  font-size: 40rpx;
  padding: 6rpx;
}

.jx-self {
  color: #2c2c2c;
}

.jx-type {
  color: #787878;
  font-size: 24rpx;
  text-align: center;
}

.info {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 52rpx;
  background: rgba(216, 216, 216, 0.1);
  margin-top: 24rpx;

  .score-box {
    display: flex;
    flex-direction: row;
    align-items: flex-start;

    .title {
      color: #2c2c2c;
      width: fit-content;
      white-space: nowrap;
      font-size: 28rpx;
      font-weight: bold;
    }

    .score {
      font-size: 24rpx;
      margin: 0 30rpx 0 10rpx;
    }
  }
}
</style>
